<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
	*{margin: 0;padding: 0;}
	body{width:100%;height:100%;overflow:hidden;}
		#div0{z-index: 3; width: 60px;height: 60px;background: black;position: fixed;right:0px;bottom: 0px;border-radius: 50%;}
		#div0 img{width: 60px;height: 60px;border-radius: 50%;}
		#div1{z-index: 2; display: none; width: 200px;height: 50px;background: chartreuse;position: fixed;right: -200px;bottom: 0px;}
		#div3{ width: 20px;height: 25px;line-height: 25px;}
		#div2{z-index: 1; width: 200px;height: 400px;background: red;position: fixed; right:0px;bottom:-400px;display: none;}
	</style>
	<script type="text/javascript">
	window.onload=function(){
		var aDiv=document.getElementsByTagName('div');
		aDiv[0].onclick=function(){
			starMove(aDiv[0],{'right':-30},function(){
				aDiv[1].style.display='block';
				starMove(aDiv[1],{'right':'0'},function(){
					aDiv[2].style.display='block';
				 starMove(aDiv[2],{'bottom':'0'})
				});
			})
			
		}
	aDiv[3].onclick=function(){
			
			starMove(aDiv[2],{'bottom':'-400'},function(){
				aDiv[2].style.display='none';
				 starMove(aDiv[1],{'right':'-200'},function(){
				 	aDiv[1].style.display='none';
				 	starMove(aDiv[0],{'right':0})
				 })
			});
			//
			//aDiv[2].style.display='none';
		}
}
		////////////
		function getStyle(obj, attr)
{
	if(obj.currentStyle)
	{
		return obj.currentStyle[attr];
	}
	else
	{
		return getComputedStyle(obj, false)[attr];
	}
	function startMove(obj, json, fnEnd)
{
	if(obj.timer)
	{
		clearInterval(obj.timer);
	}
	obj.timer=setInterval(function (){
		doMove(obj, json, fnEnd);
	}, 30);
	
	var oDate=new Date();
	
	if(oDate.getTime()-obj.lastMove>30)
	{
		doMove(obj, json, fnEnd);
	}
}

function getStyle(obj, attr)
{
	if(obj.currentStyle)
	{
		return obj.currentStyle[attr];
	}
	else
	{
		return getComputedStyle(obj, false)[attr];
	}
}

function doMove(obj, json, fnEnd)
{
	var iCur=0;
	var attr='';
	var bStop=true;	//假设运动已经该停止了
	
	for(attr in json)
	{
		if(attr=='opacity')
		{
			iCur=parseInt(100*parseFloat(getStyle(obj, 'opacity')));
		}
		else
		{
			iCur=parseInt(getStyle(obj, attr));
		}
		
		if(isNaN(iCur))
		{
			iCur=0;
		}
		
		var iSpeed=(json[attr]-iCur)/8;
		iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
		
		if(parseInt(json[attr])!=iCur)
		{
			bStop=false;
		}
		
		if(attr=='opacity')
		{
			obj.style.filter="alpha(opacity:"+(iCur+iSpeed)+")";
			obj.style.opacity=(iCur+iSpeed)/100;
		}
		else
		{
			obj.style[attr]=iCur+iSpeed+'px';
		}
	}
	
	if(bStop)
	{
		clearInterval(obj.timer);
		obj.timer=null;
		
		if(fnEnd)
		{
			fnEnd();
		}
	}
	
	obj.lastMove=(new Date()).getTime();
}
}
		function starMove (obj,json,endFn){
			clearInterval(obj.timer);
			obj.timer=setInterval(function(){
				var allStop=true;
			for(var attr in json){
				var iCur=0;
				if(attr=='opacity'){
					iCur=parseInt(parseFloat(getStyle(obj,attr)*100));
				}else{
					iCur=parseInt(getStyle(obj,attr));
				}
				var iSpeed=(json[attr]-iCur)/8;
				iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
				if(iCur!=json[attr]){
					allStop=false
				}
					if(attr=='opacity'){
						obj.style.opacity=(iCur+iSpeed)/100;
						obj.style.filter='alph(opacity:'+(iCur+iSpeed)+')';
						}else{
							obj.style[attr]=iCur+iSpeed+'px';
							
						}
				
			}
			if(allStop){
				clearInterval(obj.timer);
				endFn&&endFn();
			}
			},30)
		}
	</script>
	<body>
		
		<div id="div0">
			<img src="用CSS3和jquery实现的图片墙效果/images/full/6.jpg"/>
		</div>
		<div id="div1">
			
		</div>
		<div id="div2">
			<div id="div3">
				x
			</div>
		</div>
	</body>
</html>
